<!--
 * @Author: chengjiang
 * @Date: 2025-04-19 18:34:19
 * @Description:
-->
<script lang="ts" setup>
import { useVbenModal } from '@vben/common-ui';

import { message } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';
import { customerAdd, CustomerType } from '#/api/inout/order';
import { router } from '#/router';

defineOptions({
  name: 'CustomerDetailAdd',
});

const [Form, formApi] = useVbenForm({
  handleSubmit: onSubmit,
  schema: [
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'name',
      label: '客户名称',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'address',
      label: '地址',
      // rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'mobilePhone',
      label: '手机号',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'wechatAccount',
      label: '微信',
      // rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'email',
      label: '邮箱',
      // rules: 'required',
    },
    {
      component: 'Select',
      componentProps: {
        options: [
          { label: '个人', value: CustomerType.CUSTOMER },
          { label: '公司', value: CustomerType.COMPANY },
        ],
        placeholder: '请输入',
      },
      fieldName: 'type',
      label: '客户类型',
      // rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'remark',
      label: '备注',
      // rules: 'required',
    },
  ],
  showDefaultActions: false,
});

const [Modal, modalApi] = useVbenModal({
  draggable: true,
  onCancel() {
    message.info('取消添加客户的操作');
    modalApi.close();
  },
  onBeforeClose() {
    // message.info('取消添加客户的操作');
  },
  onConfirm: async () => {
    formApi
      .validate()
      .then(async () => {
        await formApi.submitForm();
      })
      .catch((error) => {
        message.error('表单校验失败:', error);
      });
    // message.success('添加客户成功，客户列表查看');
    // modalApi.close();
  },
  // onOpened() {
  //   message.info('onOpened：打开动画结束');
  // },
});
function onSubmit(values: Record<string, any>) {
  message.loading({
    content: '正在提交中...',
    duration: 0,
    key: 'is-form-submitting',
  });
  modalApi.modalLoading(true);
  setTimeout(() => {
    modalApi.modalLoading(false);
    // modalApi.close();
    // CustomerAddParams
    customerAdd(values)
      .then(() => {
        message.success({
          content: '提交成功',
          key: 'is-form-submitting',
          duration: 2,
        });
        // 刷新页面
        modalApi.close();
        router.go(0);
      })
      .catch(() => {
        message.error({
          content: '提交失败',
          key: 'is-form-submitting',
          duration: 2,
        });
      });
  }, 3000);
}

// function lockModal() {
//   modalApi.modalLoading(true);
//   setTimeout(() => {
//     modalApi.modalLoading(false);
//   }, 3000);
// }
</script>

<template>
  <Modal class="w-[400px]" title="添加客户" title-tooltip="可以快速添加客户">
    <!-- <a-button class="mb-5" type="primary" @click="lockModal">锁定弹窗</a-button> -->
    <Form />
  </Modal>
</template>
